<script setup lang="ts">
import { Key, TreeOption } from '@lin-lin/components/tree';
import {AddCircle,Heart} from '@vicons/ionicons5'
// import { idText } from 'typescript';
import {ref} from 'vue'
function createData(level=4,parentKey=''):any{
  if(!level) return []
  const arr =new Array (20-level).fill(0)
  return arr.map((_,idx:number)=>{
    const key=parentKey+level+idx
    return{
      label:createLabel(level),
      key,
      children:createData(level-1,key)
    }
  })
}
// function createData() {
//   return [
//     {
//       label: nextLabel(),
//       key: 1,
//       isLeaf: false //这里isleaf 为发false 表示点击的时候动态加载子节点
//     },
//     {
//       label: nextLabel(),
//       key: 2,
//       isLeaf: false
//     }
//   ]
// }
function nextLabel(currentLabel?: string|number): string {
  if (!currentLabel) return 'Out of Tao, One is born'//没有值显示第一层
  if (currentLabel === 'Out of Tao, One is born') return 'Out of One, Two'//第二层
  if (currentLabel === 'Out of One, Two') return 'Out of Two, Three'//。。。
  if (currentLabel === 'Out of Two, Three') {
    return 'Out of Three, the created universe'
  }
  if (currentLabel === 'Out of Three, the created universe') {
    return 'Out of Tao, One is born'
  }
  return ''
}
function createLabel(level:number):string{
  if(level===4) return '道生一'
  if(level===3) return '一生二'
  if(level===2) return '二生三'
  if(level===1) return '三生万物'
  return ''
}
const data=ref(createData())
// const data = ref<TreeOption[]>([
//   {
//     key: '0',
//     label: '0',
//     children: [
//       {
//         key: '0-0',
//         label: '0-0'
//       },
//       {
//         disabled: true,//这个节点被禁用了
//         key: '0-1',
//         label: '0-1',
//         children: [
//           {
//             label: '0-1-0',
//             key: '0-1-0'
//           },
//           {
//             label: '0-1-1',
//             key: '0-1-1'
//           }
//         ]
//       }
//     ]
//   }
// ])

const handleLoad=(node:TreeOption)=>{
//内部需要将展开的节点传给我.异步两种方式1回调；2.构建promise，把值抛出去
  return new Promise<TreeOption[]>((resolve,reject)=>{
    setTimeout(()=>{
      resolve([
        //这个数据会作为当前展开的额node的children属性
        {
          label:nextLabel(node.label),
          key:node.key+nextLabel(node.label),
          isLeaf:false
        }
      ])
    },1000)
  })
}
const value=ref<Key[]>([])

const check=ref(true)
// const handleChange=(val:boolean)=>{
//   console.log(val)
// }
const handleClick=(e)=>{

}
</script>

<template>
  <z-icon :color="'red'" :size="40">
    <AddCircle></AddCircle>
  </z-icon>
  <z-icon :color="'yellow'" :size="40">
    <AddCircle></AddCircle>
  </z-icon>
<!-- //若显示，则说明模板已经生效，全局组件已经注册成功 -->
 <!-- 在使用树组件时，会传递一个树形结构 -->
  <!-- 把handleLoad事件当成属性传递给组件 -->
  <!-- 用v-modal同步选中节点  -->
  {{ value }}
  <z-tree
    v-model:selected-keys="value"
    :data="data"
    :on-load="handleLoad"
    selectable
    :show-checkbox="true"
    :default-checkedKeys="['40','41']"
  >
    <template #default="{node}">{{ node.key }}-{{ node.label }}</template>
  </z-tree>
  <!-- selectable意味着可以选择节点 multiple意味着可以多选节点 selected-keys表示选中后的节点 -->
  <!-- <z-checkbox
    v-model="check"
    :indeterminate="true" 
    label="节点"
    @change="handleChange"
  >
    节点2
  </z-checkbox> -->
  <z-button @click="handleClick" @mousedown="handleClick" size="medium" type="danger" :round="true"  icon-placement="right">按钮
    <template #icon>
      <z-icon>
        <AddCircle></AddCircle>
      </z-icon>
    </template>
  </z-button>

  <z-input>
  <template #prepend> 琳琳 </template>
  <template #append> 哈哈 </template>
  <template #prefixIcon>
    <z-icon color="#ccc" size="20">
      <Heart></Heart>
    </z-icon>
  </template>
  <template #suffixIcon>
    <z-icon color="#ccc" size="20">
      <Heart></Heart>
    </z-icon>
  </template>
</z-input>

</template>

